<template>
  <div class="login-box">
    <div class="enter">
      <div>
        <input type="text" v-model="username" placeholder="手机号码" />
        <p class="hint" v-if="userflag">请输入正确11位的手机号码！</p>
        <van-icon class="icon" name="phone-o" />
        <van-icon class="icon-tail" name="clear" @click="close" />
      </div>
      <div>
        <input
          class="codeinput"
          type="text"
          v-model="code"
          placeholder="请输入验证码"
        />
        <p class="getcode">获取验证码</p>
        <van-icon class="icon" name="passed" />
      </div>
      <div :style="[pasflag ? 'margin-bottom:.5rem' : 'margin-bottom:.3rem']">
        <input
          :type="[viewflag ? 'text' : 'password']"
          v-model="password"
          placeholder="密码"
        />
        <p class="hint" v-if="pasflag">
          密码由8-16个字符组成，必须包含字母，数字，符号至少2种，且不能包含空格
        </p>
        <van-icon class="icon" name="bag-o" />
        <van-icon class="icon-tail" :name="title" @click="view" />
      </div>
    </div>
    <div
      class="btn"
      :class="[btnflag ? 'btn-t' : 'btn-f']"
      @click="btnflag && onRegister({ username, phone, password })"
    >
      注册
    </div>
    <div class="sign">
      点击“注册”表示您已同意<span>《亲亲网用户协议》</span>
    </div>
    <div class="code">已有账号，点击 <span @click="goLogin">登录</span></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue";
import router from "@/router";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      userflag: false,
      pasflag: false,
      btnflag: false,
      viewflag: false,
      code: "",
      username: "",
      password: "",
      title: "closed-eye",
      phone: "",
    });
    watch([state], () => {
      state.phone = state.username;
      const userReg =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      if (state.username.search(userReg) && !(state.username == "")) {
        state.userflag = true;
      } else {
        state.userflag = false;
      }
      const pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (state.password.search(pwdReg) && !(state.password == "")) {
        state.pasflag = true;
      } else {
        state.pasflag = false;
      }
      if (
        !state.pasflag &&
        !state.userflag &&
        state.password != "" &&
        state.username != "" &&
        state.code != ""
      ) {
        state.btnflag = true;
      } else {
        state.btnflag = false;
      }
    });
    const onRegister = (values: {
      username: string;
      phone: string;
      password: string;
    }) => {
      store.dispatch({
        type: "user/getRegister",
        values,
      });
    };
    const close = () => {
      state.username = "";
    };
    const view = () => {
      const arr = ["closed-eye", "eye"];
      state.viewflag = !state.viewflag;
      state.title = arr[Number(state.viewflag)];
    };
    return {
      ...toRefs(state),
      onRegister,
      goLogin() {
        router.push({
          name: "login",
        });
      },
      close,
      view,
    };
  },
});
</script>
<style lang="stylus" scoped>
@import '../../assets/style/border.styl';
  *
    padding 0
    margin 0
  .login-box
    display flex
    flex-direction column
    height 100%
    justify-content center
    font-size .2rem
  .enter
    display flex
    flex-direction column
    font-size .13rem
    div
      margin 0 .15rem .3rem
      padding .12rem 0
      position relative
      border 0 0 1px 0,#666
      display flex
      justify-content flex-end

      .hint
        position absolute
        top .5rem
        left 0
        color #ff4685
      .getcode
        color: #666;
        padding: 0 0.1rem;
        font-size: 0.12rem;
        white-space: nowrap;
        border: 1px,#a6a6a6,solid,1rem;
      input
        width 90%
        border-width 0
        outline none
        font-size .14rem
      .codeinput
        width 67%
      .icon
        position absolute
        top: 0.06rem;
        left: 0;
        font-size: 0.25rem;
        color: #888;
      .icon-tail
        color: #888;
        position: absolute;
        top: 0.1rem;
        right: .1rem;
        font-size: 0.2rem;
  .btn
    color #fff
    margin .05rem
    border-radius 1rem
    text-align center
    font-size 0.18rem
    height 0.5rem
    line-height 0.5rem
  .btn-t
    background: linear-gradient(270deg,#fbaa58 0,#fa4dbe);
  .btn-f
    background-color #ddd
  .sign
    font-size .15rem
    margin 0.03rem 0.15rem
    color #888
    span
      color #1991eb
  .code
    display flex
    justify-content center
    padding-top 1rem
    font-size .15rem
    margin .2rem
    color #888
    span
      color #1991eb
</style>
